<docs>
  ## 代办个人社保信息变更服务记录
</docs>
<template>
  <div class="fixedBox">
    <Mheader class="index" @back_btn="goBack()" title="代办个人社保信息变更服务记录"></Mheader>
    <!-- <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :offset="offset"
      @load="onLoad"
      :immediate-check="check"
    > -->
    <div class="search">
      <div class="dblist" v-for="(item,index) in List" :key="index" :title="item">
        <div class="clearfix">
          <p class="leftp">
            变更类型：
            <span class="spanp">{{item.xglx}}</span>
          </p>
          <p class="leftp">
            申请信息：
            <span
              :class="['spanp',item.sqztmc == '正常' ? 'rightspan' : 'rightRed']"
            >{{item.sqztmc}}</span>
          </p>
          <button
            class="right btn btn-primary db_ck"
            v-show="!item.xghjfjs"
            @click="golink(item.xgjlid)"
          >查看</button>
        </div>
        <div class="clearfix">
          <p class="leftp" v-show="item.shzt">
            审核状态：
            <span
              :class="['spanp',(item.shztmc == '未受理' ? 'rightspan2' : (item.shztmc == '--' ? 'rightRed' : (item.shztmc == '修改失败' ? 'rightRed' : 'rightspan')))]"
            >{{item.sqzt == '1' ? '--' : item.shztmc}}</span>
          </p>
          <p class="leftp" v-show="item.xghjfjs">
            缴费基数：
            <span class="spanp">{{item.xghjfjs}}</span>（元）
          </p>
          <button
            class="right btn btn-primary db_ck"
            v-show="item.sfkqx == 1"
            @click="cancel(item.xgjlid)"
          >取消</button>
        </div>
        <div class="clearfix" v-show="item.shbtgyy||item.fkbcgyy ">
          <p class="leftp text_cc" v-show="item.shbtgyy">
            审核不通过原因：
            <span class="spanp" style="line-height: 1.3">{{item.shbtgyy}}</span>
          </p>
          <p class="leftp text_cc" v-show="item.fkbcgyy">
            反馈不通过原因：
            <span class="spanp" style="line-height: 1.3">{{item.fkbcgyy}}</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 上拉刷新 -->
    <pagination-list @pullingDown="asyncFetch"
      :no-data="noData" class="search-result"
      :ajax-loading="ajaxLoading">
    </pagination-list>
    <!-- </van-list> -->
  </div>
</template>

<script>
import Mheader from "@/ldry/group/mheader/mheader";
import $ from "@/common/js/axios";
import PaginationList from "@/ldry/group/paginationList/paginationList";

export default {
  components: {
     Mheader,PaginationList
  },
  name: "dbSearch",
  data() {
    return {
      List: [], //重新加载分页时需要清空
      loading: false,
      finished: false,
      offset: 300,
      check: false,
      pageNum: 0, //重新加载分页时需要清空
      // pageSize: 12,


      page:1,
      pageSize: 10,
      ajaxLoading: false,
      noData:false
    };
  },
  created() {
    this.GET_reverseList();
  },
  methods: {
    asyncFetch(page) {
      this.GET_reverseList(page);
    },
    // 获取申请列表
    GET_reverseList(page = 1) {
      this.ajaxLoading = true;
      this.$loading = true;
      $.get("/dafwgl/bxxxxg/xxxgCx", {params:{ pageSize: this.pageSize, pageNum: page }} )
        .then(res => {
          const data = res.returnData;
          // 无查询结果
          this.$loading = false;
          if (+data.executeResult === 0) {
            this.noData = true;
            if (page === 1) {
              this.List = []
            }
          } else {
            this.noData = false;
            // 有数据
            if (page === 1) {
              this.List = data.cbxx;
            } else {
              this.List = this.List.concat(data.cbxx);
            }
          }
        })
        .finally(() => {
          this.ajaxLoading = false;
        });
    },
    goBack() {
      this.$router.go(-1);
    },
    // 分页加载
    // onLoad() {
    //   var _this = this;
    //   this.pageNum++;
    //   this.$loading = true;
    //   $.get("/dafwgl/bxxxxg/xxxgCx", {
    //     params: {
    //       pageSize: this.pageSize,
    //       pageNum: this.pageNum
    //     }
    //   })
    //     .then(res => {
    //       let _res = res.returnData;
    //       if (+_res.executeResult == 1) {
    //         if (this.pageNum > res.pageCount) {
    //           this.finished = true;
    //         } else {
    //           if (_res.cbxx.length > 0) {
    //             this.list = this.list.concat(_res.cbxx);
    //           }
    //         }
    //           this.loading = false;
    //       } else {
    //         this.$alert({
    //           type: "warning",
    //           message: _res.message,
    //           cb: function(){
    //             _this.goBack();
    //           }
    //         });
    //         return false;
    //       }
    //     })
    //     .finally(() => {
    //       this.$loading = false;
    //     });
    // },
    // 点击查看
    golink(xgjlid) {
      this.$router.push({ path: "/dbSearchDetail", query: { xgjlid: xgjlid } });
    },
    // 点击取消
    cancel(xgjlid) {
      this.$confirm("是否确认取消该条数据？", "温馨提示", {
        cancleBtnText: "取消",
        confirmBtnText: "确认"
      })
        .then(() => {
          this.$loading = true;
          $.get("/dafwgl/bxxxxg/sqQx", {
            params: {
              xgjlid: xgjlid
            }
          })
            .then(res => {
              let _res = res.returnData;
              if (+_res.executeResult == 1) {
                this.pageNum = 0;
                this.list = [];
                this.loading = false;
                this.finished = false;
                this.GET_reverseList();
              } else {
                this.$alert({
                  type: "warning",
                  message: _res.message
                });
                return false;
              }
            })
            .finally(() => {
              this.$loading = false;
            });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss">
@import "~common/scss/variable.scss";
.van-loading__text,
.van-list__error-text,
.van-list__finished-text,
.van-list__loading {
  font-size: 40px;
}
.dblist {
  // width: 95%;
  margin: 0 auto;
  border: 1px solid #cad9f2;
  border-radius: 5px;
  margin-top: 20px;
  background-color: #ffffff;
  font-size: $font-size-base;
  div {
    padding: 30px 0;
    border-bottom: 1px solid #cad9f2;
    box-sizing: border-box;
  }
  .leftp {
    float: left;
    padding: 15px 20px 0 10px;
  }

  .spancolor {
    color: $color-base;
    float: right;
    margin-right: 20px;
  }
  .biaobtn {
    width: 70px;
    height: 25px;
    line-height: 25px;
    border: none;
    background: $color-base;
    color: #fff;
    font-size: 14px;
    font-weight: 400px;
    float: right;
    text-align: center;
    display: inline-block;
    margin-right: 20px;
    border-radius: 3px;
    margin-top: 11px;
    cursor: pointer;
  }
  .db_ck {
    padding: 15px 0px 0 10px;
    margin-right: 20px;
    font-size: inherit;
    background: none;
    color: $color-base;
  }
}
</style>
